il Box Model.

Una delle cose più importanti introdotte con i CSS è il box model che permette di creare una struttura (layout) fatta da rettangoli e/o quadrati, praticamente una specie di colonne e righe, con o senza bordo, per impaginare i nostri dati, siano essi testi, immagini o qualsiasi altra cosa che potrebbe far parte di una pagina web.

La figura qui sotto mostra visivamente tali componenti:

Partendo dall'interno si ha:

l'area del contenuto. E' la zona in cui trova spazio il contenuto vero e proprio, testo, immagini, animazioni Flash. Le dimensioni orizzontali dell'area possono essere modificate con la proprietà width. Quelle verticali con height.
il padding. E' uno spazio vuoto che può essere creato tra l'area del contenuto e il bordo dell'elemento. Come si vede dalla figura, se si imposta un colore di sfondo per un elemento questo si estende dall'area del contenuto alla zona di padding.
il bordo. E' una linea di dimensione, stile e colore variabile che circonda la zona del padding e l'area del contenuto.
il margine. E' uno spazio di dimensioni variabili che separa un dato elemento da quelli adiacenti.

Unità di misura

A differenza di HTML, che usa 3 soli sistemi di attribuzione delle grandezze

Caratteri:da 1 a 7
Tabelle: pixel o percentuali
Immagini: pixel

i CSS possono utilizzare varie grandezze, tutte definibili su qualsiasi elemento. Esse possono essere raggruppate in due categorie:

Relative:

- px (pixel - relativo alla risoluzione dello schermo)
- ex (rappresenta la grandezza della lettera x)
- em (rappresenta la grandezzadella lettera m)
- percentuale

Assolute

- cm (centimetri)
- in (inches - 2,54 centimetri)
- pt (rappresenta un punto, che equivale a 1/72 in)
- mm (millimetri)
- pc (picas - equivale a 12 pt)

Bisogna distinguere tra la larghezza dell'area del contenuto e la larghezza effettiva di un box .
La prima è data dal valore della proprietà width. La seconda è data da questa somma:

margine sinistro + bordo sinistro + padding sinistro + area del contenuto + padding destro +bordo destro + margine destro

Esempio:

<html>
    <head>
        <title>CSS</title>
            <style>
                #box1{
                        background: Silver;
                        border : 10px solid #CC0033;
                        height : 100px;
                        margin : 40px;
                        padding : 10px;
                        width : 200px;}
            </style>
        </head>
<body>
<div id="box1">Area del contenuto definita da #box1</div>
</body>
</html>

Questo è il risultato che otteniamo

Dall’esempio dovrebbe emergere bene il concetto fondamentale riguardante la larghezza.
Lalarghezza complessiva dell'elemento, ovvero l'area che occupa sullo schermo, è di 320px. Si calcola così:

        margine sin. + padding sin. + bordo sinistro + width
        + padding destro + bordo destro + margine destro

        Dunque: 40 + 10 + 10 + 200 + 10 + 10 + 40 = 320

Lo spazio occupato dal box va considerato, in questo caso, dal bordo della finestra fino all''estremo del margine destro.

Un box è praticamente un contenitore di codice html che inserito in un punto qualsiasi della pagina ne segue il suo flusso naturale generando un ritorno a capo come tutti gli elementi di blocco, ne consegue che più box sarebbero disposti sempre e solo verticalmente, uno di seguito all'altro. Esempi

A causa di questa caratteristica diventerebbe impossibile creare dei layout elaborati usando più box senza fare uso di una proprietà dei fogli di style dal nome position che permette di posizionare il box in modo diverso da quello naturale.

Gli attributi ammessi per la proprietà position sono: static, relative, absolute e fixed.

static è il posizionamento predefinito, quello naturale, che segue il flusso insieme ad altri oggetti nella disposizione della pagina. Il suo posizionamento è nel punto preciso in cui viene creato o richiamato.

Esempio:

Notate come i blocchi inseriti nella pagina seguono il flusso naturale del codice e si dispongono verticalmente pur non avendo inserito alcun <br/> per il ritorno a capo. Questo perchè il tag <div>, usato per creare il blocco, così come tutti gli altri elementi di blocco, provoca automaticamente un ritorno a capo.

Non avendo impostato alcun margin i bordi risultano incollati fra loro.

Quest’altro esempio

usa la stessa definizione di box ma con un margin impostato a 5 pixel. Ricordate quanto detto nella lezione precedente riguardo al box model? si fa riferimento al box interno per cui i 5 pixel che distanziano i vari box sono 3 pixel più 2 pixel esterni che fanno da bordo.

Quando il contenuto del box supera le sue massime dimensioni, per esempio inserendo un'immagine più larga, si hanno comportamenti differenti a seconda del tipo di browser, purtroppo ognuno di questi interpreta a modo suo, per esempio alcuni allargano il box per adattarlo alla dimensione del contenuto, altri fanno uscire l'immagine dal box stesso.

E' possibile regolare questo comportamento al fine di unificarlo su tutti i browser grazie alla proprietà overflow che gestisce le barre di scorrimento sul box, le stesse che si trovano presenti in una pagina web che avesse contenuti più larghi e/o più lunghi della finestra del browser.

Questi i possibili attributi:
visible (predefinito), hidden (nascosto), auto (soltanto se necessario) scroll (sempre anche se non necessitano).

Esempio

relative è il posizionamento modificato rispetto alla posizione predefinita, praticamente un offset che consente di spostare il box rispetto alla sua naturale origine senza che questo spostamento incida o alteri il posizionamento degli altri elementi (oggetti) facenti parte della stessa pagina.

Esempio

Notate come il blocco 2 sia spostato di 12 pixel a partire dall'alto e di 20 pixel a partire dalla sinistra rispetto alla sua posizione naturale (esempio precedente) e senza che gli altri due box subiscano alcuna variazione di posizione, questo perché position relative agisce solo sul box che ne fa uso senza alterare il normale flusso.

E' possibile specificare la posizione relative usando gli attributi top, left, bottom e right rispettivamente per posizionarlo a
partire dall'alto, da sinistra, dal basso e da destra.

A questo punto il blocco 2 risulta sovrapposto al blocco 3 oscurandolo in parte, è possibile stabilire l'ordine di sovrapposizione con la proprietà z-index che accetta solo valori numerici positivi, il numero più alto è quello in primo piano e copre il numero più basso

esempio:

absolute è il posizionamento assoluto, cioè è possibile posizionare il blocco in un qualsiasi punto della pagina.

absolute farà in modo che il blocco così definito risulti come se non facesse parte della pagina, praticamente non inciderà in alcun modo con gli altri oggetti, una specie di sovrapposizione alla pagina stessa. esempio

fixed non supportato dai browser IE. E' simile al posizionamento assoluto ma il riferimento è sempre e solo alla finestra del browser, quando la pagina scorre i vari box così definiti restano fissi nella loro posizione specificata. esempio